<template>
  <el-card class="box-card">
    <!-- 搜索框 -->
    <el-form class="form">
      <el-form-item label="目录名称" class="name">
        <el-input v-model="directoryName" style="width: 200px" />
      </el-form-item>
      <el-form-item label="状态" class="state">
        <el-select v-model="state" placeholder="请选择" style="width: 200px">
          <el-option label="启用" value="启用" />
          <el-option label="禁用" value="禁用" />
        </el-select>
      </el-form-item>
      <el-form-item class="clear">
        <el-button @click="clear">清除</el-button>
      </el-form-item>
      <el-form-item class="search">
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" class="add" @click="add">
          <el-icon><EditPen /></el-icon><span>新增目录</span>
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 提示数据 -->
    <el-row class="prompt">
      <el-col :span="24">
        <div class="grid-content ep-bg-purple-dark">
          <el-icon style="vertical-align: middle; color: #757373"
            ><InfoFilled
          /></el-icon>
          <span style="padding-left: 10px; font-size: 14px; color: #999797"
            >数据一共{{ total }}条</span
          >
        </div>
      </el-col>
    </el-row>
    <!-- 列表渲染 -->
    <el-table :data="list" style="width: 100%; padding: 10px 0 30px 0">
      <el-table-column type="index" label="序号" width="100px" />
      <el-table-column prop="subjectName" label="所属学科" />
      <el-table-column prop="directoryName" label="目录名称" />
      <el-table-column prop="username" label="创建者" />
      <el-table-column prop="addDate" label="创建日期" />
      <el-table-column prop="totals" label="面试题数量" />
      <el-table-column prop="state" label="状态">
        <template #default="{ row }">{{
          row.state === 1 ? '已启用' : '已禁用'
        }}</template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template #default="{ row }">
          <template v-if="row.state === 0">
            <el-button
              style="margin: 0; padding: 5px"
              type="primary"
              v-model="state"
              text
              @click="changeState(row.id, row.state)"
              >{{ row.state === 0 ? '启用' : '禁用' }}</el-button
            >
            <el-button
              text
              style="margin: 0; padding: 5px"
              :type="'primary'"
              :disabled="!!row.state"
              @click="revise(row)"
              >修改</el-button
            >
            <el-button
              text
              :type="'primary'"
              :disabled="!!row.state"
              @click="del(row.id)"
              style="margin: 0; padding: 0"
            >
              删除
            </el-button>
          </template>
          <!-- // -->
          <template v-else>
            <el-button
              style="margin: 0; padding: 5px"
              type="primary"
              v-model="state"
              text
              @click="changeState(row.id, row.state)"
              >{{ row.state === 0 ? '启用' : '禁用' }}</el-button
            >
            <el-button
              text
              style="margin: 0; padding: 5px"
              :type="'info'"
              :disabled="!!row.state"
              >修改</el-button
            >
            <el-button
              text
              :type="'info'"
              :disabled="!!row.state"
              @click="del(row.id)"
              style="margin: 0; padding: 0"
            >
              删除
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      layout=" prev, pager, next,sizes, jumper"
      :total="total"
      :page-size="props.pagesize"
      class="mt-4"
      @size-change="sizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 新增弹出框 -->
    <el-dialog v-model="isadd" title="新增科目" style="width: 500px">
      <el-form ref="formRef" :model="form">
        <el-form-item label="所属学科" label-width="140px">
          <el-select v-model="form.subjectID" placeholder="请选择">
            <el-option
              v-for="item in list"
              :key="item.subjectName"
              :label="item.subjectName"
              :value="item.subjectID"
              >{{ item.subjectName }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item
          v-model="form.directoryName"
          label="目录名称"
          label-width="140px"
        >
          <el-input
            v-model="form.directoryName"
            autocomplete="off"
            label="请输入目录名称"
            style="width: 220px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isadd = false">取消</el-button>
          <el-button type="primary" @click="confirm"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改弹出框 -->
    <el-dialog v-model="isshow" title="修改科目" style="width: 500px">
      <el-form ref="formRef" :model="editForm">
        <el-form-item label="所属学科" label-width="140px">
          <el-select v-model="editForm.subjectID" placeholder="请选择">
            <el-option
              v-for="item in list"
              :key="item.subjectName"
              :label="item.subjectName"
              :value="item.subjectID"
              >{{ item.subjectName }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item
          v-model="editForm.directoryName"
          label="目录名称"
          label-width="140px"
        >
          <el-input
            v-model="editForm.directoryName"
            autocomplete="off"
            label="请输入目录名称"
            style="width: 220px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isshow = false">取消</el-button>
          <el-button type="primary" @click="editcomfirm"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import {
  delDirectorysList,
  getDirectorysList,
  addDirectorysSimple,
  editDirectorys,
  change
} from '@/api/directory'
import dayjs from 'dayjs'
import { directoryItem } from '@/api/directory/type'

const directoryName = ref(null)
let state = ref('')
const list = ref<directoryItem[]>([])
const isadd = ref(false)
const isshow = ref(false)
const total = ref(0)
const centerDialogVisible = ref(false)
const formRef = ref()
const form = ref({
  subjectName: '',
  directoryName: '',
  subjectID: ''
})
const editForm = ref({
  subjectName: '',
  directoryName: '',
  subjectID: '',
  id: ''
})

function clear() {
  state.value = ''
  directoryName.value = null
  getlist(props.value)
}
const props = ref({
  pagesize: 10,
  page: 1
})

function sizeChange(val: any) {
  props.value.pagesize = val
  getlist(props.value)
}
function handleCurrentChange(val: any) {
  props.value.page = val
  getlist(props.value)
}

// 搜索
function search() {
  if (
    state.value === '启用' ||
    state.value === '禁用' ||
    directoryName.value !== null
  ) {
    getlist({
      pagesize: 10,
      page: 1,
      state: state.value === '启用' ? 1 : 0,
      directoryName: directoryName.value
    })
  } else {
    ElMessage({
      message: '请填写需要的数据',
      type: 'warning'
    })
  }
}

// 修改弹出框
function revise(row: any) {
  isshow.value = true
  editForm.value.directoryName = row.directoryName
  editForm.value.subjectName = row.subjectName
  editForm.value.subjectID = row.subjectID
  editForm.value.id = row.id
}
// 修改目录确认提交
async function editcomfirm() {
  await editDirectorys({
    id: editForm.value.id,
    directoryName: editForm.value.directoryName,
    subjectID: editForm.value.subjectID
  })
  getlist(props.value)
  isshow.value = false
}

// 状态改变
async function changeState(id: number, state: number) {
  const states = state === 1 ? 0 : 1
  await change({ id, state: states })
  getlist(props.value)
}
// 获取列表
async function getlist(prop: any) {
  const res = await getDirectorysList(prop)
  console.log(res.data.items)
  list.value = res.data.items
  total.value = res.data.counts
  state.value = res.data.state
  // 更改时间格式
  list.value.forEach(item => {
    return (item.addDate = dayjs(item.addDate).format('YYYY-MM-DD HH:mm:ss'))
  })
}
getlist(props.value)
// 删除
async function del(id: string) {
  centerDialogVisible.value = true
  await delDirectorysList(id)
  getlist(props.value)
}

// 添加目录
function add() {
  isadd.value = true
  getlist(props.value)
}
// 添加目录确认提交
async function confirm() {
  if (!form.value.directoryName && !form.value.subjectName) {
    ElMessage({
      message: '请填写需要的数据',
      type: 'warning'
    })
  } else {
    await addDirectorysSimple({
      subjectID: form.value.subjectID,
      directoryName: form.value.directoryName
    })
    formRef.value.resetFields()
    form.value.subjectID = ''
    form.value.directoryName = ''
    form.value.subjectName = ''
    getlist(props.value)
    isadd.value = false
  }
}
</script>

<style lang="scss" scoped>
.color {
  background-color: #e3e2e2;
}
.box-card {
  margin: 10px;
  padding: 0 20px;
  position: relative;
}
.form {
  display: flex;
  align-items: center;
}
.add {
  position: absolute;
  right: -440px;
  top: -15px;
}
.name {
  margin-right: 40px;
}
.state {
  margin-right: 15px;
}
.clear {
  margin-right: 10px;
}
.search {
  margin-right: 240px;
}
.prompt {
  height: 40px;
  line-height: 40px;
  background-color: #e3e2e2;
}
.grid-content {
  padding: 0 10px;
}
.mt-4 {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>
